<template>
  <div class="App">
    <div v-if="isShow">
      <input type="text" ref="inputD" v-model="titles" />
      <button v-on:click="submit">确认</button>
    </div>

    <div v-else>
      <p>{{ title }}</p>
      <button v-on:click="edit">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      titles: "",
      title: "大标题",
    };
  },
  methods: {
    submit() {
      this.title = this.titles;
      this.isShow = false;
    },
    edit() {
      // 1. 显示输入框 (异步dom更新)
      this.isShow = true;
      // 2. input框中聚焦 （此时是不会成功的  因为input框还没有加载出来 ，vue中dom是异步更新的）
      // this.$refs.inputD.focus();

      // 使用$nextTick 等dom更新完，会立刻执行准备的函数体
      this.$nextTick(()=>{
        this.$refs.inputD.focus();
        this.titles=''
      })
    },
  },
};
</script>

<style>
.ceshi {
  width: 300px;
  height: 300px;
}
</style>